<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>云桥 (CrossBridge) - 跨境电商独立站开源项目</title>
    <meta name="description" content="云桥(CrossBridge)跨境电商独立站开源项目正在寻找开发者、测试者和资源支持，共同建设开源跨境电商解决方案。">
    <!-- Bootstrap CSS CDN -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome CDN -->
    <link href="https://cdn.staticfile.org/font-awesome/6.1.1/css/all.min.css" rel="stylesheet">
    <!-- AOS CSS CDN -->
    <link href="https://cdn.staticfile.org/aos/2.3.4/aos.css" rel="stylesheet">
    <!-- 自定义样式 -->
    <link rel="stylesheet" href="css/style.css">
    <link rel="shortcut icon" href="images/favicon.svg" type="image/svg+xml">
    <style>
        :root {
            --primary-color: #4a7bff;
            --secondary-color: #2d5be3;
            --light-blue-color: #e8f0ff;
            --medium-blue-color: #4a7bff;
        }
        .btn-primary {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
        }
        .btn-primary:hover, .btn-primary:focus {
            background-color: var(--secondary-color);
            border-color: var(--secondary-color);
        }
        .text-primary {
            color: var(--primary-color) !important;
        }
        .section-divider {
            background-color: var(--primary-color);
        }
        a {
            color: var(--primary-color);
        }
        a:hover {
            color: var(--secondary-color);
        }
        .bg-light-blue {
            background-color: var(--light-blue-color);
        }
        .bg-medium-blue {
            background-color: var(--medium-blue-color);
        }
        .footer-links a {
            margin: 0 8px;
            font-size: 1.2rem;
        }
    </style>
</head>
<body>
    <!-- 导航区 -->
    <nav class="navbar navbar-expand-lg navbar-light bg-white fixed-top">
        <div class="container">
            <a class="navbar-brand" href="#">
                <img src="images/logo.svg" alt="云桥跨境" height="40">
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="#intro">项目介绍</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#features">核心功能</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#tech">技术架构</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#join">参与方式</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#contact">联系我</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- 头部Banner区 -->
    <header class="hero-section" id="home">
        <div class="container">
            <div class="row align-items-center min-vh-80">
                <div class="col-lg-6" data-aos="fade-right">
                    <h1 class="display-4 fw-bold">云桥 (CrossBridge)</h1>
                    <h2 class="h3 mb-4">跨境电商独立站开源项目</h2>
                    <p class="lead mb-4">一套完全开源的跨境电商解决方案，降低技术门槛，提升开发效率</p>
                    <div class="d-flex gap-3">
                        <a href="https://gitee.com/zhangjiangcn/cross_bridge" target="_blank" class="btn btn-primary btn-lg">参与贡献</a>
                        <a href="#intro" class="btn btn-outline-secondary btn-lg">了解更多</a>
                    </div>
                </div>
                <div class="col-lg-6 mt-5 mt-lg-0" data-aos="fade-left">
                    <img src="images/banner-illustration.svg" alt="项目示意图" class="img-fluid">
                </div>
            </div>
        </div>
    </header>

    <!-- 项目介绍区 -->
    <section id="intro" class="py-5">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-8 text-center" data-aos="fade-up">
                    <h2 class="section-title">项目介绍</h2>
                    <div class="section-divider mb-4"></div>
                </div>
                <div class="col-lg-8 mx-auto" data-aos="fade-up" data-aos-delay="100">
                    <p class="mb-4">我们正在开发一套完全开源的跨境电商独立站解决方案，旨在降低中小企业的跨境电商技术门槛。项目包含注册平台、独立站后台管理和独立站门户三大核心系统，为用户提供一站式跨境电商独立站建设工具。</p>
                    <p class="mb-4">本项目采用MIT开源协议，鼓励社区贡献和商业应用。我们相信通过开源协作可以建立一个高质量、可持续发展的跨境电商技术生态。</p>
                    <p>项目当前处于初期开发阶段，计划在4个月内完成核心功能的MVP版本。我们采用渐进式开发策略，优先实现最核心的功能，并随社区反馈不断迭代完善。</p>
                </div>
            </div>
        </div>
    </section>

    <!-- 核心功能区 -->
    <section id="features" class="py-5 bg-light">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-8 text-center" data-aos="fade-up">
                    <h2 class="section-title">核心功能</h2>
                    <div class="section-divider mb-5"></div>
                </div>
            </div>
            <div class="row g-4">
                <!-- 注册平台功能 -->
                <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="100">
                    <div class="feature-card">
                        <div class="feature-icon">
                            <i class="fas fa-user-plus"></i>
                        </div>
                        <h3 class="feature-title">注册平台</h3>
                        <p>用户注册、站点创建、套餐管理、域名绑定系统，支持多站点一键部署与管理。</p>
                    </div>
                </div>
                
                <!-- 后台管理功能 -->
                <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="200">
                    <div class="feature-card">
                        <div class="feature-icon">
                            <i class="fas fa-cogs"></i>
                        </div>
                        <h3 class="feature-title">后台管理</h3>
                        <p>产品管理、订单处理、内容编辑、SEO优化工具，提供完善的站点运营功能。</p>
                    </div>
                </div>
                
                <!-- 独立站门户 -->
                <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="300">
                    <div class="feature-card">
                        <div class="feature-icon">
                            <i class="fas fa-desktop"></i>
                        </div>
                        <h3 class="feature-title">独立站门户</h3>
                        <p>响应式设计、多语言支持、产品展示、在线询盘功能，多终端一体化体验。</p>
                    </div>
                </div>
                
                <!-- 国际化支持 -->
                <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="400">
                    <div class="feature-card">
                        <div class="feature-icon">
                            <i class="fas fa-globe"></i>
                        </div>
                        <h3 class="feature-title">国际化支持</h3>
                        <p>支持104种语言、多货币展示、多种国际支付方式，满足全球业务拓展需求。</p>
                    </div>
                </div>
                
                <!-- 营销工具 -->
                <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="500">
                    <div class="feature-card">
                        <div class="feature-icon">
                            <i class="fas fa-bullhorn"></i>
                        </div>
                        <h3 class="feature-title">营销工具</h3>
                        <p>SEO优化、社交分享、邮件营销集成、数据分析，助力品牌全球营销。</p>
                    </div>
                </div>
                
                <!-- 开发框架 -->
                <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="600">
                    <div class="feature-card">
                        <div class="feature-icon">
                            <i class="fas fa-code"></i>
                        </div>
                        <h3 class="feature-title">开发框架</h3>
                        <p>高性能、安全可靠、易于定制、模块化设计，满足开发者个性化需求。</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 技术架构区 -->
    <section id="tech" class="py-5">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-8 text-center" data-aos="fade-up">
                    <h2 class="section-title">技术架构</h2>
                    <div class="section-divider mb-5"></div>
                </div>
            </div>
            <div class="row g-4">
                <div class="col-lg-6" data-aos="fade-right">
                    <div class="tech-container">
                        <div class="row">
                            <!-- 前端技术 -->
                            <div class="col-md-6 mb-4">
                                <div class="tech-icon">
                                    <i class="fab fa-react"></i>
                                </div>
                                <h3 class="h4 mb-3">前端技术</h3>
                                <ul class="list-unstyled">
                                    <li class="mb-2"><i class="fas fa-check-circle text-primary me-2"></i>React + Ant Design + TailwindCSS</li>
                                    <li class="mb-2"><i class="fas fa-check-circle text-primary me-2"></i>响应式设计，支持PC/移动端</li>
                                    <li class="mb-2"><i class="fas fa-check-circle text-primary me-2"></i>模块化组件开发</li>
                                </ul>
                            </div>
                            
                            <!-- 后端技术 -->
                            <div class="col-md-6 mb-4">
                                <div class="tech-icon">
                                    <i class="fab fa-node-js"></i>
                                </div>
                                <h3 class="h4 mb-3">后端技术</h3>
                                <ul class="list-unstyled">
                                    <li class="mb-2"><i class="fas fa-check-circle text-primary me-2"></i>Node.js + Express</li>
                                    <li class="mb-2"><i class="fas fa-check-circle text-primary me-2"></i>RESTful API设计</li>
                                    <li class="mb-2"><i class="fas fa-check-circle text-primary me-2"></i>JWT认证机制</li>
                                </ul>
                            </div>
                            
                            <!-- 数据存储 -->
                            <div class="col-md-6 mb-4">
                                <div class="tech-icon">
                                    <i class="fas fa-database"></i>
                                </div>
                                <h3 class="h4 mb-3">数据存储</h3>
                                <ul class="list-unstyled">
                                    <li class="mb-2"><i class="fas fa-check-circle text-primary me-2"></i>MySQL关系型数据库</li>
                                    <li class="mb-2"><i class="fas fa-check-circle text-primary me-2"></i>Redis缓存（可选）</li>
                                    <li class="mb-2"><i class="fas fa-check-circle text-primary me-2"></i>文件存储服务</li>
                                </ul>
                            </div>
                            
                            <!-- 部署方案 -->
                            <div class="col-md-6 mb-4">
                                <div class="tech-icon">
                                    <i class="fab fa-docker"></i>
                                </div>
                                <h3 class="h4 mb-3">部署方案</h3>
                                <ul class="list-unstyled">
                                    <li class="mb-2"><i class="fas fa-check-circle text-primary me-2"></i>Docker容器化部署</li>
                                    <li class="mb-2"><i class="fas fa-check-circle text-primary me-2"></i>支持主流云平台</li>
                                    <li class="mb-2"><i class="fas fa-check-circle text-primary me-2"></i>CI/CD自动化流程</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6" data-aos="fade-left">
                    <div class="tech-container h-100 d-flex flex-column">
                        <h3 class="h4 mb-4">系统架构图</h3>
                        <div class="tech-diagram flex-grow-1 d-flex align-items-center justify-content-center">
                            <img src="images/tech-architecture.svg" alt="技术架构图" class="img-fluid">
                        </div>
                        <div class="mt-4 text-center">
                            <p>项目仓库：</p>
                            <div class="d-flex justify-content-center gap-3">
                                <a href="https://gitee.com/zhangjiangcn/cross_bridge" target="_blank" class="btn btn-outline-danger">
                                    <i class="fab fa-git-alt me-2"></i>Gitee
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 合作方式区 -->
    <section id="join" class="py-5 bg-light">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-8 text-center" data-aos="fade-up">
                    <h2 class="section-title">参与方式</h2>
                    <div class="section-divider mb-5"></div>
                </div>
            </div>
            <div class="row g-4">
                <!-- 技术开发 -->
                <div class="col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="100">
                    <div class="join-card h-100">
                        <div class="text-center mb-4">
                            <div class="rounded-circle bg-primary text-white d-inline-flex justify-content-center align-items-center" style="width: 70px; height: 70px;">
                                <i class="fas fa-laptop-code fa-2x"></i>
                            </div>
                        </div>
                        <h3 class="h4 text-center mb-3">技术开发</h3>
                        <p>我们需要前端、后端和全栈开发者参与核心功能开发。</p>
                        <p class="text-muted">技术要求：React/Node.js/MySQL经验，熟悉Git协作流程。</p>
                    </div>
                </div>
                
                <!-- 文档编写 -->
                <div class="col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="200">
                    <div class="join-card h-100">
                        <div class="text-center mb-4">
                            <div class="rounded-circle bg-success text-white d-inline-flex justify-content-center align-items-center" style="width: 70px; height: 70px;">
                                <i class="fas fa-file-alt fa-2x"></i>
                            </div>
                        </div>
                        <h3 class="h4 text-center mb-3">文档编写</h3>
                        <p>帮助完善技术文档、使用手册和API说明。</p>
                        <p class="text-muted">要求：良好的技术理解能力和文档写作经验。</p>
                    </div>
                </div>
                
                <!-- 测试与反馈 -->
                <div class="col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="300">
                    <div class="join-card h-100">
                        <div class="text-center mb-4">
                            <div class="rounded-circle bg-warning text-white d-inline-flex justify-content-center align-items-center" style="width: 70px; height: 70px;">
                                <i class="fas fa-bug fa-2x"></i>
                            </div>
                        </div>
                        <h3 class="h4 text-center mb-3">测试与反馈</h3>
                        <p>参与功能测试、提交Bug报告和功能建议。</p>
                        <p class="text-muted">要求：具备测试经验或电商系统使用经验。</p>
                    </div>
                </div>
                
                <!-- 资源支持 -->
                <div class="col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="400">
                    <div class="join-card h-100">
                        <div class="text-center mb-4">
                            <div class="rounded-circle bg-danger text-white d-inline-flex justify-content-center align-items-center" style="width: 70px; height: 70px;">
                                <i class="fas fa-hands-helping fa-2x"></i>
                            </div>
                        </div>
                        <h3 class="h4 text-center mb-3">资源支持</h3>
                        <p>提供服务器资源、推广渠道或其他形式支持。</p>
                        <p class="text-muted">欢迎有资源的个人或组织联系我们探讨合作。</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 贡献者展示区 -->
    <section id="contributors" class="py-5">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-8 text-center" data-aos="fade-up">
                    <h2 class="section-title">贡献者社区</h2>
                    <div class="section-divider mb-5"></div>
                </div>
            </div>
            <div class="row justify-content-center">
                <div class="col-lg-8" data-aos="fade-up">
                    <div class="card border-0 shadow">
                        <div class="card-body p-4">
                            <h3 class="h4 mb-4 text-center">加入我们的开源社区</h3>
                            <div class="row text-center">
                                <div class="col-md-6 mb-4 mb-md-0">
                                    <div class="p-3 h-100 border rounded">
                                        <h4 class="h5">社区贡献步骤</h4>
                                        <ul class="list-unstyled text-start">
                                            <li class="mb-2"><i class="fas fa-arrow-right text-primary me-2"></i>Fork项目仓库</li>
                                            <li class="mb-2"><i class="fas fa-arrow-right text-primary me-2"></i>选择感兴趣的任务</li>
                                            <li class="mb-2"><i class="fas fa-arrow-right text-primary me-2"></i>提交Pull Request</li>
                                            <li class="mb-2"><i class="fas fa-arrow-right text-primary me-2"></i>成为项目贡献者</li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="p-3 h-100 border rounded">
                                        <h4 class="h5">成为核心团队成员</h4>
                                        <p class="mb-3">活跃的贡献者有机会加入核心开发团队，共同决定项目方向。</p>
                                        <a href="https://gitee.com/zhangjiangcn/cross_bridge/issues" class="btn btn-primary">成为首批贡献者</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 联系我区 -->
    <section id="contact" class="py-5 bg-light">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-8 text-center" data-aos="fade-up">
                    <h2 class="section-title">联系我</h2>
                    <div class="section-divider mb-5"></div>
                </div>
            </div>
            <div class="row g-4">
                <div class="col-lg-8 mx-auto" data-aos="fade-up">
                    <div class="contact-form h-100">
                        <h3 class="h4 mb-4 text-center">社区交流渠道</h3>
                        <div class="row g-3 text-center">
                            <div class="col-sm-6">
                                <div class="p-3 border rounded">
                                    <i class="fas fa-comments fa-2x text-primary mb-2"></i>
                                    <h4 class="h6 mb-1">QQ</h4>
                                    <p class="mb-0">2066165211</p>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="p-3 border rounded">
                                    <i class="fab fa-weixin fa-2x text-success mb-2"></i>
                                    <h4 class="h6 mb-1">微信号</h4>
                                    <p class="mb-0">luoxuecn</p>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="p-3 border rounded">
                                    <i class="fab fa-git-alt fa-2x text-dark mb-2"></i>
                                    <h4 class="h6 mb-1">Gitee讨论区</h4>
                                    <a href="https://gitee.com/zhangjiangcn/cross_bridge/issues" class="text-decoration-none">前往Gitee</a>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="p-3 border rounded">
                                    <i class="fas fa-envelope fa-2x text-danger mb-2"></i>
                                    <h4 class="h6 mb-1">电子邮件</h4>
                                    <p class="mb-0">2066165211@qq.com</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 页脚区 -->
    <footer class="bg-medium-blue py-4">
        <div class="container">
            <div class="row">
                <div class="col-lg-6 text-center text-lg-start">
                    <p class="mb-lg-0 text-white">&copy; 2025 云桥 (CrossBridge) | 遵循MIT开源协议</p>
                </div>
                <div class="col-lg-6 text-center text-lg-end">
                    <div class="footer-links">
                        <a href="https://gitee.com/zhangjiangcn/cross_bridge" target="_blank"><i class="fab fa-git-alt"></i></a>
                        <a href="mailto:2066165211@qq.com"><i class="fas fa-envelope"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </footer>

    <!-- JavaScript文件 -->
    <!-- Bootstrap JS CDN -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>
    <!-- AOS JS CDN -->
    <script src="https://cdn.staticfile.org/aos/2.3.4/aos.js"></script>
    <!-- 自定义脚本 -->
    <script src="js/main.js"></script>
</body>
</html>